<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<style>
  .container {
    width: 98vw;
    height: 95vh;
    position: relative;
  }

  .bg {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E7E7E7;
    border: 2px solid #E5E5E5;
  }

  .bg img:nth-child(1) {
    width: 45%;
    height: 45%;
    object-fit: contain;
  }

  .pointer {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 42%;
    left: 42%;
    background-color: transparent;
  }

  /*关键帧 将元素原地旋转*/
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(var(--random-rotation, 0deg));
    }
  }

  /*动画*/
  .rotate {
    animation: rotate 5s linear;
    animation-fill-mode: forwards;
  }

  .form-container {
    width: 98vw;
    height: 95vh;
    padding: 50px;
    display: none;
    position: relative;
    border: 2px solid #E5E5E5;
  }

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  label {
    display: block;
    margin-bottom: 5px;
  }

  input[type="text"],
  input[type="tel"],
  input[type="text"],
  select,
  textarea {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  #verification {
    width: 60%;
  }

  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
  }

  button#getVerification {
    background-color: #F03D3C;
  }

  button[type="submit"] {
    width: 80%;
    background-color: #F03D3C;
  }

  button:hover {
    background-color: #0056b3;
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-size: 20px 20px;
    padding-right: 30px;
  }


</style>

<body>
<div class="container">
  <div class="bg">
    <img src="./images/background.png" alt="">
    <img class="pointer" src="./images/pointer.png" alt="">
  </div>
  <div class="form-container">
    <form>
      <div class="form-group">
        <label for="name">收货人姓名</label>
        <input type="text" id="name" name="name" placeholder="收货人姓名" required>
      </div>
      <div class="form-group">
        <label for="phone">手机号码</label>
        <input type="tel" id="phone" name="phone" placeholder="手机号码" required>
      </div>
      <div class="form-group">
        <label for="verification">手机验证码</label>
        <input type="text" id="verification" name="verification" placeholder="手机验证码" required>
        <button id="getVerification">获取验证码</button>
      </div>
      <div class="form-group">
        <label for="region">选择地区</label>
        <select id="region" name="region">
          <option value="province">省份</option>
        </select>
        <select id="city" name="region" style="margin-top: 10px">
          <option value="province">城市</option>
        </select>
      </div>
      <div class="form-group">
        <label for="address">详细地址</label>
        <textarea id="address" name="address" required></textarea>
      </div>
      <div class="form-group">
        <button type="submit" class="submit">提交订单</button>
      </div>
    </form>
  </div>
</div>
</body>

<script>
  // 进入界面后2秒钟后开始旋转，5秒钟后停止旋转；
  window.onload = function () {
    const pointer = document.querySelector('.pointer');
    // 随机生成旋转角度（0到360度之间）
    const randomRotation = Math.floor(Math.random() * 360);

    // 将生成的旋转角度应用到CSS自定义属性中
    pointer.style.setProperty('--random-rotation', `${randomRotation}deg`);

    // 2秒后开始旋转
    setTimeout(() => {
      pointer.classList.add('rotate');
    }, 2000);

    // 7秒后停止旋转
    setTimeout(() => {
      //pointer.classList.remove('rotate');
      // 隐藏bg
      document.querySelector('.bg').style.display = 'none';
      // 显示表单
      document.querySelector('.form-container').style.display = 'block';
    }, 7000);
  }

</script>
</html>
